<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/merchants' }" >商城管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/merchants' }" >商户管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/addMerchant' }" >选择品牌</el-breadcrumb-item>
			<el-breadcrumb-item>编辑商户</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
				<el-tab-pane
					:key="index"
					v-for="(item, index) in editableTabs"
					:label="item.shopName"
					:name="String(index)"
				>
					<div style="display: flex;justify-content: space-between;">
						<p>基本信息 <span >目前仅在{{item.shopCategory == 0?'App':'H5'}}展示 <a v-if="item.isAdd" @click="changeH5(index)">{{item.shopCategory == 0?'切换详细信息版':'切换基本信息版'}}</a></span></p>
						<el-button v-if="item.auditStatus==2" type="primary" @click="drawer = true">查看二维码</el-button>
					</div>
					<el-divider></el-divider>
					<el-row :gutter="60">
						<el-col :span="12" v-if="item.shopCategory == 0">
							<span>序号</span>
							<el-input v-model="item.sort" placeholder="输入商户排序(数字越大排序越靠前)"></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>商户账号</span>
							<div style="display: flex;width: 80%;">
								<el-input :disabled="!item.isAdd" v-model="item.loginName" placeholder="设置登录账号" style="margin-right: 5px;"></el-input>
								<el-input type="password" :disabled="!item.isAdd" v-model="item.shopPassword" placeholder="设置登录密码"></el-input>
								<span style="font-size: 12px;color: #4D4D4D;">{{item.isAdd ?'保存后暂不支持修改':'如需修改请联系管理员'}}</span>
							</div>
						</el-col>
						<el-col :span="12">
							<span>商户名称</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopName" clearable></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 0">
							<span>品类</span>
							<el-select v-model="item.menuId" placeholder="选择分类">
								<el-option value="" label="请选择分类"></el-option>
								<el-option
								  v-for="itemo in options1"
								  :key="itemo.menuId"
								  :label="itemo.name"
								  :value="itemo.menuId">
								</el-option>
							  </el-select>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 0">
							<span>所在地</span>
							<el-select v-model="item.city" placeholder="选择所在地">
								<el-option value="" label="选择所在地"></el-option>
								<el-option value="北京市" label="北京市"></el-option>
								<el-option value="郑州市" label="郑州市"></el-option>
								<el-option value="长沙市" label="长沙市"></el-option>
								<el-option value="武汉市" label="武汉市"></el-option>
							</el-select>
						</el-col>
						<el-col :span="12"  v-if="item.shopCategory == 1">
							<span>门店名称</span>
							<div style="display: flex;width: 80%;align-items: center;">
								<el-input  :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.storeName" placeholder="请输入门店名称"></el-input>
								<span style="font-size: 12px;color: #4D4D4D;">资方提供</span>
							</div>
						</el-col>
						<el-col :span="12"  v-if="item.shopCategory == 1">
							<span>门店编码</span>
							<div style="display: flex;width: 80%;align-items: center;">
								<el-input  :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.storeCode" placeholder="请输入门店编码"></el-input>
								<span style="font-size: 12px;color: #4D4D4D;">资方提供</span>
							</div>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>商户联系人</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.contactName" placeholder="输入商户联系人"></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>联系人电话</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" type="number" v-model="item.contactPhone" placeholder="输入联系人电话"></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>商户电话</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopPhone" placeholder="输入商户电话(选填)"></el-input>
						</el-col>
						<el-col :span="12"  v-if="item.shopCategory == 1">
							<span>商户所在省</span>
							<el-select @change="shopProcodeChange" :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopProcode" placeholder="请选择">
								<el-option value="" label="请选择"></el-option>
								<el-option v-for="(itemc,indexc) in shopProcodeList" :value="itemc.id" :label="itemc.name"></el-option>
							</el-select>
						</el-col>
						<el-col :span="12"  v-if="item.shopCategory == 1">
							<span>商户所在市</span>
							<el-select @change="shopCityChange" :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopCitycode" placeholder="请选择">
								<el-option value="" label="请选择"></el-option>
								<el-option v-for="(itemc,index) in shopCityList" :value="itemc.id" :label="itemc.name"></el-option>
							</el-select>
						</el-col>
						<el-col :span="12"  v-if="item.shopCategory == 1">
							<span>商户所在区</span>
							<el-select :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopCouncode" placeholder="请选择">
								<el-option value="" label="请选择"></el-option>
								<el-option v-for="(itemc,index) in shopCounList" :value="itemc.id" :label="itemc.name"></el-option>
							</el-select>
						</el-col>
						<el-col :span="12"  v-if="item.shopCategory == 1">
							<span>地址</span>
							<div style="display: flex;width: 80%;align-items: center;">
								<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopAddress" placeholder="请输入商户地址"></el-input>
								<span style="font-size: 12px;color: #409EFF;text-decoration: underline;">在地图中搜索</span>
							</div>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>商户简介</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" type="textarea" v-model="item.shopIntroduce" placeholder="输入商户简介(选填)"></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>标签</span>
							<el-checkbox-group :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.labelCategory">
								<el-checkbox :key="0" :label="0">精选商户</el-checkbox>
								<el-checkbox :key="1" :label="1">优选商户</el-checkbox>
								<el-checkbox :key="2" :label="2">资质认证</el-checkbox>
							  </el-checkbox-group>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>商户归属</span>
							<div style="display: flex;width: 80%;">
								<el-input :disabled="!item.isAdd" v-model="item.businessAffairsName" placeholder="输入商务姓名" style="margin-right: 5px;"></el-input>
								<el-input type="number" :disabled="!item.isAdd" v-model="item.businessAffairsPhone" placeholder="输入商务手机号"></el-input>
								<span style="font-size: 12px;color: #4D4D4D;">{{item.isAdd ?'保存后暂不支持修改':'如需修改请联系管理员'}}</span>
							</div>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>品类</span>
							<el-select :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.menuId" placeholder="选择分类">
								<el-option value="" label="请选择分类"></el-option>
								<el-option
								  v-for="itemo in options1"
								  :key="itemo.menuId"
								  :label="itemo.name"
								  :value="itemo.menuId">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 0">
							<span>联系方式</span>
							<el-input v-model="item.shopPhone" placeholder="输入商户电话"></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 0">
							<span>地址</span>
							<el-input v-model="item.shopAddress" placeholder="输入商户地址"></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>支持期限</span>
							<el-checkbox-group :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.supportPeriod">
								<el-checkbox :key="3" :label="3">3期</el-checkbox>
								<el-checkbox :key="6" :label="6">6期</el-checkbox>
								<el-checkbox :key="9" :label="9">9期</el-checkbox>
								<el-checkbox :key="12" :label="12">12期</el-checkbox>
								<el-checkbox :key="18" :label="18">18期</el-checkbox>
								<el-checkbox :key="24" :label="24">24期</el-checkbox>
							  </el-checkbox-group>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>贷款品种流水号</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.typSeq" placeholder="输入贷款品种流水号"></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>贷款品种编码</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.typCde" placeholder="输入贷款品种编码"></el-input>
						</el-col>
						<el-col :span="12" v-if="item.shopCategory == 1">
							<span>贷款品种名称</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.typDesc" placeholder="贷款品种名称"></el-input>
						</el-col>
						<el-col :span="12">
							<div>
								<span>logo</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="chooseImage()">点击上传</el-button>
								<input @change="photoChange($event)" type="file" :id="'upload_file'+index" multiple style="display: none"/>
							</div>
							<div v-if="item.orderImage != ''" style="margin-left: 10px;">
								<img class="editIcon" :src="'data:image/jpeg;base64,'+item.orderImage" />
							</div>
						</el-col>
						<el-col :span="12">
							<span>月销量</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.sellCounts" placeholder="输入月销量"></el-input>
						</el-col>
					</el-row>
					<div v-if="item.shopCategory == 1">
						<p>收款账户信息</p>
						<el-divider></el-divider>
						<el-row :gutter="60">
							<el-col :span="12">
								<span>账户类型</span>
								<el-radio-group :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.applAcTyp">
									<el-radio label="02">对公账户</el-radio>
									<el-radio label="01">个人账户</el-radio>
								  </el-radio-group>
							</el-col>
							<el-col :span="12">
								<span>收款账户</span>
								<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.corporateAccount" placeholder="输入对公账户"></el-input>
							</el-col>
							<el-col :span="12">
								<span>所属银行及支行</span>
								<!-- <el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.bank" placeholder="输入开户行信息"></el-input> -->
								<div style="display: flex;width: 80%;">
									<el-select @change="bankCodeChange" value-key="item" :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.bankCode" placeholder="请选择">
										<el-option value="" label="请选择"></el-option>
										<el-option v-for="(itembank,indexbank) in bankList" :value="itembank.bankCode" :label="itembank.bankName" :key="indexbank"></el-option>
									</el-select>
									<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.bank" placeholder="输入支行名称"></el-input>
								</div>
							</el-col>
							<el-col :span="12">
								<span>户名</span>
								<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.accountName" placeholder="输入户名"></el-input>
							</el-col>
							<el-col :span="12">
								<span>开户行所在省</span>
								<el-select @change="provinceChange" :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.provinceCode" placeholder="请选择">
									<el-option value="" label="请选择"></el-option>
									<el-option v-for="(itempro,indexpro) in provinceList" :value="itempro.areaCode" :label="itempro.areaName"></el-option>
								</el-select>
							</el-col>
							<el-col :span="12">
								<span>开户行所在市</span>
								<el-select :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.cityCode" placeholder="请选择">
									<el-option value="" label="请选择"></el-option>
									<el-option v-for="(itempro,indexpro) in cityList" :value="itempro.areaCode" :label="itempro.areaName"></el-option>
								</el-select>
							</el-col>
							<el-col :span="12">
								<span>开户银行联行号</span>
								<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.bankNumber" placeholder="输入开户行机构12位银联号"></el-input>
							</el-col>
							<el-col :span="24"  style="display: block;" v-if="item.applAcTyp=='02'">
								<span>对公账户证明</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosecorporateImage()">点击上传</el-button>
								<input @change="photocorporateChange($event)" type="file" :id="'upload_file_corporate'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.corporate">
										<div class="img-wapper-top-clear" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3"  @click="deleteImg('corporate',index,indexf)"><img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/deleteimg.png"></div>
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
						</el-row>
					  
						<p>营业执照</p>
						<el-divider></el-divider>
						<el-row :gutter="60">
							<el-col :span="12">
								<span>营业执照号</span>
								<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.businessLicenseNo" placeholder="输入营业执照号"></el-input>
							</el-col>
							<el-col :span="12">
								<span>企业名称</span>
								<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.enterpriseName" placeholder="输入企业名称"></el-input>
							</el-col>
							<el-col :span="24"  style="display: block;">
								<span>营业执照</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="chooselicenseImage()">点击上传</el-button>
								<input @change="photolicenseChange($event)" type="file" :id="'upload_file_license'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.license">
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
						</el-row>
					  
						<p>法人信息</p>
						<el-divider></el-divider>
						<el-row :gutter="60">
							<el-col :span="12">
								<span>法人姓名</span>
								<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.legalPersonName" placeholder="输入法人姓名"></el-input>
							</el-col>
							<el-col :span="12">
								<span>法人身份证号</span>
								<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.legalPersonIdCard" placeholder="输入法人身份证号"></el-input>
							</el-col>
							<el-col :span="24"  style="display: flex;align-items: flex-start;">
								<span>法人身份证复印件</span>
								<div style="display: flex;">
									<div style="margin-right: 200px;">
										<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosefrontImage()">点击上传正面</el-button>
										<input @change="photofrontChange($event)" type="file" :id="'upload_file_front'+index" multiple style="display: none"/>
										<div class="imgList">
											<div class="imgItem" v-for="(itemf,indexf) in item.front">
												<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
											</div>
										</div>
									</div>
									<div>
										<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosebackImage()">点击上传反面</el-button>
										<input @change="photobackChange($event)" type="file" :id="'upload_file_back'+index" multiple style="display: none"/>
										<div class="imgList">
											<div class="imgItem" v-for="(itemf,indexf) in item.back">
												<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
											</div>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					  
						<p>许可证</p>
						<el-divider></el-divider>
						<el-row :gutter="60">
							<el-col :span="12">
								<span>卫生许可证</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosehygieneImage()">点击上传</el-button><span style="font-size: 10px;color: #4D4D4D;text-align: left;padding-left: 10px;">生美类必传</span>
								<input @change="photohygieneChange($event)" type="file" :id="'upload_file_hygiene'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.hygiene">
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<span>医疗许可证</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosemedicalImage()">点击上传</el-button><span style="font-size: 10px;color: #4D4D4D;text-align: left;padding-left: 10px;">医美类必传</span>
								<input @change="photomedicalChange($event)" type="file" :id="'upload_file_medical'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.medical">
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
						</el-row>
					  
					  
						<p>其他信息</p>
						<el-divider></el-divider>
						<el-row :gutter="60">
							<el-col :span="24"  style="display: block;">
								<span>尽职调查报告</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosediligenceImage()">点击上传</el-button>
								<input @change="photodiligenceChange($event)" type="file" :id="'upload_file_diligence'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.diligence">
										<div class="img-wapper-top-clear" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="deleteImg('diligence',index,indexf)"><img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/deleteimg.png"></div>
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
							<el-col :span="24"  style="display: block;">
								<span>商户现场照片</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosemerchantImage()">点击上传</el-button><span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">需包含医院logo、销售人员自拍</span>
								<input @change="photomerchantChange($event)" type="file" :id="'upload_file_merchant'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.merchant">
										<div class="img-wapper-top-clear" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="deleteImg('merchant',index,indexf)"><img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/deleteimg.png"></div>
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
							<el-col :span="24"  style="display: block;">
								<span>其他补充资料</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="chooseotherImage()">点击上传</el-button><span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">选填</span>
								<input @change="photootherChange($event)" type="file" :id="'upload_file_other'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.other">
										<div class="img-wapper-top-clear" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="deleteImg('other',index,indexf)"><img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/deleteimg.png"></div>
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
						</el-row>  
					  
						<p>合同</p>
						<el-divider></el-divider>
						<el-row :gutter="60">
							<el-col :span="24"  style="display: block;">
								<span>资方-商户合同</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosemanagementImage()">点击上传</el-button><span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">选填</span>
								<input @change="photomanagementChange($event)" type="file" :id="'upload_file_management'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.management">
										<div class="img-wapper-top-clear" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="deleteImg('management',index,indexf)"><img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/deleteimg.png"></div>
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
							<el-col :span="24"  style="display: block;">
								<span>时尖-商户合同</span>
								<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="chooseacetechImage()">点击上传</el-button><span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">选填</span>
								<input @change="photoacetechChange($event)" type="file" :id="'upload_file_acetech'+index" multiple style="display: none"/>
								<div class="imgList">
									<div class="imgItem" v-for="(itemf,indexf) in item.acetech">
										<div class="img-wapper-top-clear" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="deleteImg('acetech',index,indexf)"><img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/deleteimg.png"></div>
										<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.imgUrl" alt="">
									</div>
								</div>
							</el-col>
						</el-row>  
					</div>
					  
					<p>详细信息</p>
					<el-divider></el-divider>
					<el-row :gutter="60">
						<el-col :span="24"  style="display: block;">
							<span>商户头图</span>
							<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosefirstImage()">点击上传</el-button>
							<input @change="photofirstChange($event)" type="file" :id="'upload_file_first'+index" multiple style="display: none"/>
							<div class="imgList">
								<div class="imgItem" v-for="(itemf,indexf) in item.firstImgList">
									<div class="img-wapper-top-clear" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="deleteImg('firstImgList',index,indexf)"><img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/deleteimg.png"></div>
									<img class="imgItem-con" :src="'data:image/jpeg;base64,'+itemf.firstUrl" alt="">
								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<span>营业时间</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopHours" placeholder="请输入营业时间"></el-input>
							<span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">选填</span>
						</el-col>
						<el-col :span="12">
							<span>开业时间</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopOpenHours" placeholder="请输入开业时间"></el-input>
							<span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">选填</span>
						</el-col>
						<el-col :span="12">
							<span>门店面积</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopStoreArea" placeholder="请输入门店面积"></el-input>
							<span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">选填</span>
						</el-col>
						<el-col :span="12">
							<span>其他设施</span>
							<el-input :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.shopFacilities" placeholder="请输入其他设施"></el-input>
							<span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">选填</span>
						</el-col>
						<el-col :span="24" style="display: block;">
							<span>商户介绍图</span>
							<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" size="mini" @click="choosesecondImage()">点击上传</el-button><span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">按展示顺序上传，选填</span>
							<input @change="photosecondChange($event)" type="file" :id="'upload_file_second'+index" multiple style="display: none"/>
							<div class="imgList">
								<div class="imgItem" v-for="(items,indexs) in item.secondImgList">
									<div class="img-wapper-top-clear" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="deleteImg('secondImgList',index,indexs)"><img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/deleteimg.png"></div>
									<img class="imgItem-con" :src="'data:image/jpeg;base64,'+items.secondUrl" alt="">
								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<span>保存后立即开启</span>
							<el-radio-group :disabled="item.auditStatus==1||item.auditStatus==2" v-model="item.onOffStatus">
								<el-radio :label="1">立即开启</el-radio>
								<el-radio :label="2">暂不开启</el-radio>
							  </el-radio-group>
						</el-col>
					</el-row>
					<p>商品管理</p>
					<el-divider></el-divider>
					<el-button :disabled="item.auditStatus==1||item.auditStatus==2" type="primary" @click="seachEquery('','2','isadd')">添加</el-button>
					<span style="font-size: 10px;color: #4D4D4D;width: 200px;text-align: left;padding-left: 10px;">选填</span>
					<el-table :data="item.itemsInfoList" border stripe>
						<el-table-column prop="sort" label="商品序号"></el-table-column>
						<el-table-column prop="itemName" label="商品名称"></el-table-column>
						<el-table-column prop="priceNormal" label="价格"></el-table-column>
						<el-table-column prop="reserveCounts" label="库存"></el-table-column>
						<el-table-column label="属性">
							<template slot-scope="scope">
								{{scope.row.itemType == 'all'?'品牌通用':'仅本店'}}
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template slot-scope="scope">
								<el-switch
									v-model="scope.row.onOffStatus"
									@change="statusChanged(scope.row,scope.row.itemId)"
									active-color="#13ce66"
									inactive-color="#ff4949"
									active-value="1"
									inactive-value="0">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" @click="seachEquery(scope.row.itemId,'1')">查看</el-button>
								<el-button size="mini" type="primary" @click="seachEquery(scope.row.itemId,'2')">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div v-if="item.shopCategory == 0">
						<el-button type="primary" @click="saveInfo">保存</el-button>
						<el-button @click="back">取消</el-button>
					</div>
					<div v-if="item.shopCategory == 1">
						<el-button type="primary" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="savebystages(0)">保存</el-button>
						<el-button :disabled='!stagesTrialok' type="primary" v-if="item.auditStatus==0||item.auditStatus==4||item.auditStatus==3" @click="savebystages(1)">保存并提交审核</el-button>
						<el-button type="primary" v-if="item.auditStatus==1" @click="savebystagesRevoke">撤销审核</el-button>
						<el-button @click="back">取消</el-button>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		
		<el-dialog
		  :title="isAddInfo?'添加':'修改'"
		  :visible.sync="editDialogVisible"
		  width="80%">
			<el-row :gutter="60">
				<el-col :span="12">
					<span>商品序号</span>
					<el-input v-model="editinfoList.sort" :disabled="disabledType" placeholder="0~99，数字越大排序越靠前"></el-input>
				</el-col>
				<el-col :span="12">
					<span>商品名称</span>
					<el-input v-model="editinfoList.itemName" :disabled="disabledType" placeholder="输入商品名称"></el-input>
				</el-col>
				<el-col :span="12">
					<span>售价</span>
					<el-input v-model="editinfoList.priceDiscount" :disabled="disabledType" placeholder="输入实际价格,例:100元"></el-input>
				</el-col>
				<el-col :span="12">
					<span>原价</span>
					<el-input v-model="editinfoList.priceNormal" :disabled="disabledType" placeholder="输入商品原价,例:100元"></el-input>
				</el-col>
				<el-col :span="12">
					<span>生效时间</span>
					<el-date-picker
					  v-model="editinfoList.startTime"
					  type="datetime"
					  value-format="yyyy-MM-dd HH:mm:ss"
					  placeholder="生效时间">
					</el-date-picker>
				</el-col>
				<el-col :span="12">
					<span>有效期</span>
					<el-input v-model="editinfoList.validityCount" :disabled="disabledType" placeholder="输入有效天数,例:100天"></el-input>
				</el-col>
				<el-col :span="12">
					<span>次数</span>
					<el-input v-model="editinfoList.counts" :disabled="disabledType" placeholder="输入商品使用次数"></el-input>
				</el-col>
				<el-col :span="24" class="listWapper">
					<span>营销标签</span>
					<div class="listInner-out">
						<div v-for="(item,index) in editinfoList.tagVoList" class="listInner">
							<el-input v-model="item.value" :disabled="disabledType" placeholder="输入标签内容"></el-input>
							<el-input v-model="item.code" :disabled="disabledType" placeholder="输入标签色值"></el-input>
							<span class="tips">非必填</span>
						</div>
					</div>
				</el-col>
				<el-col :span="24" class="listWapper">
					<span>商品介绍</span>
					<div class="listInner-out">
						<div v-for="(item,index) in editinfoList.content" class="listInner">
							<el-input v-model="item.title" :disabled="disabledType" placeholder="输入介绍标题"></el-input>
							<el-input v-model="item.details" :disabled="disabledType" placeholder="输入介绍内容"></el-input>
							<el-input v-model="item.counts" :disabled="disabledType" placeholder="输入介绍备注"></el-input>
							<div class="add" @click="addContent(index)" v-if="!disabledType">添加</div>
							<div class="del" @click="deleteList('content',index)" v-if="!disabledType && editinfoList.content.length>1">删除</div>
						</div>
					</div>
				</el-col>
				<el-col :span="24" class="listWapper">
					<span>购买须知</span>
					<div class="listInner-out">
						<div v-for="(item,index) in editinfoList.sellRemark" class="listInner">
							<el-input v-model="item.title" :disabled="disabledType" placeholder="输入须知标题"></el-input>
							<el-input v-model="item.content" :disabled="disabledType" placeholder="输入须知内容"></el-input>
							<div class="add"  @click="addSellRemark(index)" v-if="!disabledType">添加</div>
							<div class="del" @click="deleteList('sellRemark',index)" v-if="!disabledType && editinfoList.sellRemark.length>1">删除</div>
						</div>
					</div>
				</el-col>
				<el-col :span="24" class="listWapper">
					<span>使用规则</span>
					<div class="listInner-out">
						<div v-for="(item,index) in editinfoList.remark" class="listInner">
							<el-input v-model="item.content" :disabled="disabledType" placeholder="输入规则内容"></el-input>
							<div class="add" @click="addRemark(index)" v-if="!disabledType">添加</div>
							<div class="del"  @click="deleteList('remark',index)" v-if="!disabledType && editinfoList.remark.length>1">删除</div>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<span>商品库存</span>
					<el-input v-model="editinfoList.reserveCounts" :disabled="disabledType" placeholder="商品库存"></el-input>
				</el-col>
				<el-col :span="12">
					<span>商品属性</span>
					<el-select v-model="editinfoList.itemType" placeholder="请选择" :disabled="disabledType">
						<el-option value="" label="请选择"></el-option>
						<el-option value="all" label="品牌通用"></el-option>
						<el-option value="common" label="仅本店"></el-option>
					</el-select>
				</el-col>
				<el-col :span="12">
					<span>保存上架</span>
					<el-radio v-model="editinfoList.onOffStatus" :label="1">立即上架</el-radio>
					<el-radio v-model="editinfoList.onOffStatus" :label="2">暂不上架</el-radio>
				</el-col>
			</el-row>
			<el-button type="primary" v-if="!disabledType" @click="editinfoSave">保存</el-button>
			<el-button @click="editDialogVisible = false">取消</el-button>
		</el-dialog>
		<div style="display:none" >{{ exitsVal }}</div>
		
		<el-dialog
		  :title="商户二维码"
		  :visible.sync="drawer"
		  width="80%">
			  <div class="q-wapper">
				 <canvas id="mycanvas" width="596" height="840"></canvas>
			  </div>
			  <div class="q-wapper" style="margin-top: 20px;">
				<el-button type="primary" class="btn" @click="saveQrCode">点击保存二维码图片</el-button>
			  </div>
		 </el-dialog>
		
		<!-- <el-drawer
			title="商户二维码"
			:visible.sync="drawer">
				<div class="q-wapper">
					 <canvas id="mycanvas" width="375" height="582"></canvas>
				</div>
				<div class="q-wapper" style="margin-top: 20px;">
					<el-button type="primary" class="btn" @click="saveQrCode">点击保存二维码图片</el-button>
				</div>
		</el-drawer> -->
	</div>
</template>

<script>
	var that
	//  获取canvas
	var canvas = document.getElementById("mycanvas")
  export default {
    data() {
      return {
        editableTabsValue: '0',
        editableTabs: [],
        tabIndex:2,
		modulelist:{
			"brandId":this.$route.query.id,
			"auditStatus":0,
			"shopCategory":0,
			"accountName":"",/* 户名 */
			"bank":"",/* 所属银行 */
			"bankNumber":"",/* 开户银行联行号 */
			"businessAffairsName":"",/* 商务姓名 */
			"businessAffairsPhone":"",/* 商务手机号 */
			"businessLicenseNo":"",/* 营业执照号 */
			"cityCode":"",/* 市行政代码 */
			"contactName":"",/* 联系人 */
			"contactPhone":"",/* 联系人电话 */
			"provinceCode":"",/* 省行政代码 */
			"corporateAccount":"",/* 对公账户 */
			"enterpriseName":"",/* 企业名称 */
			"labelCategory":[],/* 标签类别:0:精选商户,1:优选商户,2资质认证 */
			"supportPeriod":[],
			"applAcTyp":'02',
			"typSeq":'',/*  贷款品种流水号*/
			"typCde":'',/* 贷款品种代码 */
			"typDesc":'',/* 贷款品种名称 */
			"imgList":[],/* 分期商户图片集合 */
			"legalPersonIdCard":"",/* 法人身份证号 */
			"legalPersonName":"",/* 法人姓名 */
			"oerationType":"",/* 操作类型:0保存，1提交审核 */
			"sort":"",
			"shopName":"新增",/* 商家名称 */
			"loginName":"",/* 商户账号 */
			"shopPassword":"",/* 商户密码 */
			"menuId":"",/* 品类id */
			"sellCounts":"",/* 销量 */
			"shopProcode":"",
			"shopCitycode":"",
			"shopCouncode":"",
			"bankCode":"",
			"bankName":"",
			"city":"",
			"shopAddress":"",/* 地址 */
			"shopPhone":"",/* 联系方式 */
			"shopOpenHours":"",/*  开业时间*/
			"orderImage":"",/* LOGO */
			"shopHours":"",/* 营业时间 */
			"shopIntroduce":"",/* 商户简介 */
			"shopLegalPerson":"",/* 商户法人 */
			"shopStoreArea":"",/* 门店面积 */
			"shopFacilities":"",/* 环境设施 */
			"storeCode":"",/* 门店代码 */
			"storeName":"",/* 门店名称 */
			"onOffStatus":1,/* 上下架状态1:上架 2:下架 */
			"isAdd":true,
			"firstImgList":[
			],
			"secondImgList":[
			],
			"corporate":[],/* 对公账户证明 */
			"license":[],/* 营业执照 */
			"front":[],/* 身份证正面 */
			"back":[],/* 身份证背面 */
			"hygiene":[],/* 卫生许可证 */
			"medical":[],/* 医疗许可证 */
			"diligence":[],/* 尽职调查报告 */
			"merchant":[],/* 商户现场照片 */
			"other":[],/* 其他补充资料 */
			"management":[],/* 资方合同 */
			"acetech":[],/* 时尖合同 */
		},
		options1:[],
		editinfoList:[],
		editDialogVisible:false,
		disabledType:false,
		tagVoList:{"tagId":"","code":"","value":""},/* 营销标签 */
		content:{"title":"","details":"","counts":""},/* 商品介绍 */
		sellRemark:{"title":"","content":""},/* 购买须知 */
		remark:{"content":""},/* 使用规则 */
		isAddInfo:false,
		apph5:'App',
		checkList: ['资质认证'],
		ifExist:0,
		stagesTrialok:false,
		drawer:false,
		provinceList:[],
		cityList:[],
		shopProcodeList:[],
		shopCityList:[],  
		shopCounList:[],
		bankList:[]
      }
    },
	async created() {
		await this.gethbankList()
		await this.gethtreecityList()
		this.getInfo()
		this.getCategory()
		this.getcityList(0)
		
		that = this
		this.doDraw('https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/canvasbj12.png')
	},
	computed:{
		exitsVal:function(){
		    this.ifExist=0
			if(this.editableTabs[this.editableTabsValue].shopCategory == 1 || this.editableTabs[this.editableTabsValue].isAdd){
				for(let k in this.editableTabs[this.editableTabsValue]){
					if(k=='loginName'||k=='shopPassword'||k=='shopName'||k=='storeName'||k=='storeCode'||k=='shopProcode'||k=='shopCitycode'||k=='shopCouncode'||k=='bankCode'||k=='bankName'||k=='contactName'||k=='contactPhone'||k=='shopAddress'||k=='sellCounts'||k=='menuId'||k=='businessAffairsName'||k=='businessAffairsPhone'||k=='orderImage'||k=='corporateAccount'||k=='bank'||k=='bankNumber'||k=='accountName'||k=='provinceCode'||k=='cityCode'||k=='businessLicenseNo'||k=='enterpriseName'||k=='legalPersonName'||k=='legalPersonIdCard'||k=='typSeq'||k=='typCde'||k=='typDesc'){
						this.ifExist += Number(Boolean(this.editableTabs[this.editableTabsValue][k]))
					}else if(k=='corporate'){
						if(this.editableTabs[this.editableTabsValue].applAcTyp=='02'){
							this.ifExist += Number(Boolean(this.editableTabs[this.editableTabsValue][k].length>=1))
						}else{
							this.ifExist += 1
						}
					}else if(k=='license'||k=='front'||k=='back'||k=='diligence'||k=='merchant'||k=='labelCategory'||k=='firstImgList'||k=='supportPeriod'){
						this.ifExist += Number(Boolean(this.editableTabs[this.editableTabsValue][k].length>=1))
					}else if(k=='hygiene'){
						this.ifExist += Number(Boolean(this.editableTabs[this.editableTabsValue][k].length>=1))
						if(this.editableTabs[this.editableTabsValue].medical.length<1 && this.editableTabs[this.editableTabsValue][k].length>=1){
							this.ifExist += 1
						}
						// if(this.editableTabs[this.editableTabsValue].menuId=='2'){
						// 	this.ifExist += Number(Boolean(this.editableTabs[this.editableTabsValue][k].length>=1))
						// }else if(this.editableTabs[this.editableTabsValue].menuId=='1'){
						// 	this.ifExist += 1
						// }
					}else if(k=='medical'){
						this.ifExist += Number(Boolean(this.editableTabs[this.editableTabsValue][k].length>=1))
						if(this.editableTabs[this.editableTabsValue].hygiene.length<1 && this.editableTabs[this.editableTabsValue][k].length>=1){
							this.ifExist += 1
						}
					}
				}
			}
			
		}
	},
	watch:{
		editableTabsValue(newVal,oldVal){
			this.doDraw('https://acetech.oss-cn-beijing.aliyuncs.com/aceTechAdminWeb/canvasbj12.png');
			if(this.editableTabs[newVal].provinceCode === ''){
				this.cityList=[]
			}else{
				this.getcityList(this.editableTabs[newVal].provinceCode)
			}
			/* 省市区联动 */
			this.shopProcodeList.forEach((item,index)=>{
				if(item.id == this.editableTabs[newVal].shopProcode){
					this.shopCityList = item.children
				}
			})
			this.shopCityList.forEach((item,index)=>{
				if(item.id == this.editableTabs[newVal].shopCitycode){
					this.shopCounList = item.children
				}
			})
		},
		ifExist(newVal,oldVal){
			if(Number(newVal) === 42 && this.editableTabs[this.editableTabsValue].isAdd){/* 为新增情况下必填字段数为31 */
				this.stagesTrialok=true
				console.log('必填填好')
			}else if(Number(newVal) >= 41 && !this.editableTabs[this.editableTabsValue].isAdd){
				this.stagesTrialok=true
				console.log('必填填好')
			}else{
				this.stagesTrialok=false
			}
		},
	},
    methods:{
		async getshopList(shopId){
			const {data:res} = await this.$http.post('/shopQrCode/queryShopQrCode?shopId='+shopId)
			return res.data.qrCode
		},
		async getcityList(num){
			const {data:res} = await this.$http.get('/area/getAreaByParent?areaParentCode='+num)
			if(num === 0){
				this.provinceList=res.data
			}else{
				this.cityList=res.data
			}
		},
		/* 获取银行卡信息 */
		async gethbankList(){
			const {data:res} = await this.$http.get('/bankCard/getChannelBankCard?channelNum=haier')
			this.bankList = res.data
		},
		/* 改变银行卡 */
		bankCodeChange(val){
			var obj = {}
			obj = this.bankList.find(function(item){
			return item.bankCode === val
			})
			//obj 就是被选中的那个对象，也就能拿到label值了。
			this.editableTabs[this.editableTabsValue].bankName = obj.bankName
			// console.log(obj.bankName)//label值
			// console.log(val)//value值
		},
		async gethtreecityList(){
			const {data:res} = await this.$http.get('/area/getAll')
			this.shopProcodeList = res.data
		},
		provinceChange(){
			this.editableTabs[this.editableTabsValue].cityCode=''
			if(this.editableTabs[this.editableTabsValue].provinceCode === ''){
				this.cityList=[]
			}else{
				this.getcityList(this.editableTabs[this.editableTabsValue].provinceCode)
			}
			
		},
		/* 改变省，市列表改变 */
		shopProcodeChange(e){
			this.editableTabs[this.editableTabsValue].shopCitycode=''
			this.editableTabs[this.editableTabsValue].shopCouncode=''
			if(this.editableTabs[this.editableTabsValue].shopProcode === ''){
				this.shopCityList=[]
				this.shopCounList=[]
			}else{
				this.shopProcodeList.forEach((item,index)=>{
					if(item.id == e){
						this.shopCityList = item.children
					}
				})
			}
		},
		/* 改变市，区列表改变 */
		shopCityChange(e){
			this.editableTabs[this.editableTabsValue].shopCouncode=''
			if(this.editableTabs[this.editableTabsValue].shopCitycode === ''){
				this.shopCounList=[]
			}else{
				this.shopCityList.forEach((item,index)=>{
					if(item.id == e){
						this.shopCounList = item.children
					}
				})
			}
		},
		saveQrCode () {
			const vv = document.createElement('a');
			vv.href = canvas.toDataURL('image/png');
			vv.download = this.editableTabs[this.editableTabsValue].shopName;
			vv.click();	
		},
		doDraw(imageUrl){
		    //  由于弹窗，确保已获取到
		    var a = setInterval(() =>{
		        //  重复获取
		        canvas = document.getElementById("mycanvas")
		        if(!canvas){
		          return false
		        } else {
		            clearInterval(a)
		            //  可以理解为一个画笔，可画路径、矩形、文字、图像
		            var context = canvas.getContext('2d')
					context.scale(2, 2); // 放大2倍
		            var img = new Image()
		            img.src = imageUrl
					img.crossOrigin = 'Anonymous';
		            //  加载图片
		            img.onload = function(){
		                if(img.complete){
		                    //  根据图像重新设定了canvas的长宽
		                    canvas.setAttribute("width",596)
		                    canvas.setAttribute("height",840)
		                    //  绘制图片
		                    context.drawImage(img,0,0,596,840)
							
							// 设置字体大小
							context.font = "28px Microsoft YaHei"
							// 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
							context.textBaseline = 'middle'
							context.textAlign = 'center'
							// 距离左边的位置
							var left = canvas.width / 2
							// 距离上边的位置 (图片高-文字距离图片底部的距离)
							var top = 185
							// 文字颜色
							context.fillStyle = "#333333"
							// 文字在画布的位置
							context.fillText(that.editableTabs[that.editableTabsValue].shopName, left, top)
							
							var myImage2 = new Image();
							myImage2.src = that.editableTabs[that.editableTabsValue].qrCode;  //你自己本地的图片或者在线图片
							myImage2.crossOrigin = 'Anonymous';
							myImage2.onload = function(){
								context.drawImage(myImage2 , 137 , 270 , 322 , 322);
							}
							
		                }
		            }
		        }
		    },1)
		},
		async getInfo(){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			const {data:res} = await this.$http.post('/brand/queryDetailsByBrandId',{id:this.$route.query.id})
			console.log(res)
			loading.close();
			if(res.data.length == 0){
				this.editableTabs.push(this.modulelist)
			}else{
				res.data.forEach(async (item,index) => {
					this.$set(item,'isAdd',false);
					this.$set(item,'onOffStatus',item.shopOnOffStatus);
					var qrCode = await this.getshopList(item.shopId)
					this.$set(item,'qrCode',qrCode);
					item.labelCategory = JSON.parse(item.labelCategory)
					if(item.supportPeriod === null){/* 判断这个字段是否为空 */
						item.supportPeriod = []
					}else{
						item.supportPeriod = JSON.parse(item.supportPeriod)
					}
					/* 创建图片集合
					 corporate   对公账户证明
					 license     营业执照
					 front     身份证正面
					 back     身份证背面
					 hygiene     卫生许可证
					 medical     医疗许可证
					 diligence 尽职调查报告
					 merchant 商户现场照片
					 other  其他补充资料
					 management 资方合同
					 acetech  时尖合同*/
					this.$set(item,'corporate',[]);
					this.$set(item,'license',[]);
					this.$set(item,'front',[]);
					this.$set(item,'back',[]);
					this.$set(item,'hygiene',[]);
					this.$set(item,'medical',[]);
					this.$set(item,'diligence',[]);
					this.$set(item,'merchant',[]);
					this.$set(item,'other',[]);
					this.$set(item,'management',[]);
					this.$set(item,'acetech',[]);
					
					item.imgList.forEach(async (imgitem,imgindex)=>{
						imgitem.imgUrl=await this.getInfobase64Img(imgitem.imgUrl)
						switch(imgitem.imgShopType){
							case "corporate":
								item.corporate.push(imgitem)
								break
							case "license":
								item.license.push(imgitem)
								break
							case "front":
								item.front.push(imgitem)
								break
							case "back":
								item.back.push(imgitem)
								break
							case "hygiene":
								item.hygiene.push(imgitem)
								break
							case "medical":
								item.medical.push(imgitem)
								break
							case "diligence":
								item.diligence.push(imgitem)
								break
							case "merchant":
								item.merchant.push(imgitem)
								break
							case "other":
								item.other.push(imgitem)
								break
							case "management":
								item.management.push(imgitem)
								break
							case "acetech":
								item.acetech.push(imgitem)
								break
							default:
								//这里是没有找到对应的值处理
								break
						}
					})
					item.orderImage=await this.getInfobase64Img(item.orderImage)
					item.firstImgList.forEach(async (itemfi,indexfi) => {
						itemfi.firstUrl=await this.getInfobase64Img(itemfi.firstUrl)
					})
					item.secondImgList.forEach(async (itemse,indexse) => {
						itemse.secondUrl=await this.getInfobase64Img(itemse.secondUrl)
					})
				})
				/* 查看区列表 */
				if(res.data[this.editableTabsValue].provinceCode === ''){
					this.cityList=[]
				}else{
					this.getcityList(res.data[this.editableTabsValue].provinceCode)
				}
				/* 省市区联动 */
				this.shopProcodeList.forEach((item,index)=>{
					if(item.id == res.data[this.editableTabsValue].shopProcode){
						this.shopCityList = item.children
					}
				})
				this.shopCityList.forEach((item,index)=>{
					if(item.id == res.data[this.editableTabsValue].shopCitycode){
						this.shopCounList = item.children
					}
				})
				this.editableTabs = res.data
				console.log(this.editableTabs)
			}
			
		},
		getInfobase64Img(image){
			return new Promise(async (resolve, reject) => {
				var orderImage = ''
				await this.$base64Img(image).then((res) => {		//调用全局方法
					orderImage = res
				})
				resolve(orderImage.split(',')[1])
			})
		},
		async getCategory(){
			const {data:res} = await this.$http.get('/shopManage/menuList')
			this.options1 = res.data
		},
		handleTabsEdit(targetName, action) {
			if (action === 'add') {
			  this.editableTabs.push(this.modulelist);
			  this.editableTabsValue = String(this.editableTabs.length-1) ;
			}
		},
		/* 图片集合 */
		pictureCollection(){
			return new Promise(async (resolve, reject) => {
				var corporate = this.editableTabs[this.editableTabsValue].corporate
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].license)
				corporate.push.apply(this.editableTabs[this.editableTabsValue].corporate,this.editableTabs[this.editableTabsValue].front)
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].back)
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].hygiene)
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].medical)
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].diligence)
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].merchant)
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].other)
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].management)
				corporate.push.apply(corporate,this.editableTabs[this.editableTabsValue].acetech)
				console.log(corporate)
				resolve(corporate)
			})
		},
		async savebystages(oerationType){
			var collection = await this.pictureCollection();
			this.editableTabs[this.editableTabsValue].imgList = collection
			this.$set(this.editableTabs[this.editableTabsValue],'oerationType',oerationType)
			if(this.editableTabs[this.editableTabsValue].isAdd){
				var reg = /^[0-9a-zA-Z]*$/
				if(!Boolean(this.editableTabs[this.editableTabsValue].loginName) || !reg.test(this.editableTabs[this.editableTabsValue].loginName)){
					this.$message({
					  message: '请填写商户账号，只支持数字、字母',
					  type: 'warning'
					});
					return
				}
				if(this.editableTabs[this.editableTabsValue].shopPassword.length<6){
					this.$message({
					  message: '请填写6位及以上商户密码',
					  type: 'warning'
					});
					return
				}
				if(!Boolean(this.editableTabs[this.editableTabsValue].shopName)){
					this.$message({
					  message: '请填写商户名称',
					  type: 'warning'
					});
					return
				}
				if(!Boolean(this.editableTabs[this.editableTabsValue].businessAffairsName) || !Boolean(this.editableTabs[this.editableTabsValue].businessAffairsPhone)){
					this.$message({
					  message: '请填写商户归属',
					  type: 'warning'
					});
					return
				}
			}
			var list ={}
			for(let k in this.editableTabs[this.editableTabsValue]){
				if(k=='orderImage'){
					if(Boolean(this.editableTabs[this.editableTabsValue][k])){
						this.$set(list,k,this.editableTabs[this.editableTabsValue][k])
					}
				}else if(k=='firstImgList'||k=='imgList'||k=='secondImgList'){
					if(Boolean(this.editableTabs[this.editableTabsValue][k].length>=1)){
						this.$set(list,k,this.editableTabs[this.editableTabsValue][k])
					}
				}else if(k=='labelCategory'||k=='supportPeriod'){
					this.$set(list,k,JSON.stringify(this.editableTabs[this.editableTabsValue][k]))
				}else if(k=='loginName'||k=='shopPassword'||k=='itemsInfoList'){
					if(this.editableTabs[this.editableTabsValue].isAdd){
						// JSON.stringify()
						this.$set(list,k,this.editableTabs[this.editableTabsValue][k])
					}
				}else{
					this.$set(list,k,this.editableTabs[this.editableTabsValue][k])
				}
			}
			console.log(list)
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			if(this.editableTabs[this.editableTabsValue].isAdd){/* 新增 */
				const {data:res} = await this.$http.post('/shopStagesManage/save',list)
				console.log(res)
				loading.close();
				if(res.code!==200) {
					return this.$message.error('添加失败')
				}
				this.$message.success('添加成功')
				this.getInfo()
				
			}else{
				const {data:res} = await this.$http.post('/shopStagesManage/update',list)
				console.log(res)
				loading.close();
				if(res.code!==200) {
					return this.$message.error('修改失败')
				}
				this.$message.success('修改成功')
				this.getInfo()
				
			}
		},
		async savebystagesRevoke(){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			const {data:res} = await this.$http.post('/auditShop/audit',{
				"auditAtatus":4,
				"shopId":this.editableTabs[this.editableTabsValue].shopId
			})
			loading.close();
			if(res.code!==200) {
				return this.$message.error('修改失败')
			}
			this.$message.success('修改成功')
			this.getInfo()
			
		},
		chooseImage(){
			document.getElementById('upload_file'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　},
		async photoChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].orderImage = dataURL.split(',')[1]
			}else{
				alert('上传了非图片');
			}
		},
		choosefirstImage(){
			document.getElementById('upload_file_first'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photofirstChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].firstImgList.push({"firstId":'',"firstUrl":dataURL.split(',')[1]})
			}else{
				alert('上传了非图片');
			}
		},
		choosesecondImage(){
			document.getElementById('upload_file_second'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photosecondChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].secondImgList.push({"secondId":'',"secondUrl":dataURL.split(',')[1]})
			}else{
				alert('上传了非图片');
			}
		},
		/* 对公账户证明 */
		choosecorporateImage(){
			document.getElementById('upload_file_corporate'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photocorporateChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].corporate.push({"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'corporate'})
			}else{
				alert('上传了非图片');
			}
		},
		/* 营业执照 */
		chooselicenseImage(){
			document.getElementById('upload_file_license'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photolicenseChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].license=[{"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'license'}]
			}else{
				alert('上传了非图片');
			}
		},
		/* 身份证正面 */
		choosefrontImage(){
			document.getElementById('upload_file_front'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photofrontChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].front=[{"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'front'}]
			}else{
				alert('上传了非图片');
			}
		},
		/*  身份证背面 */
		choosebackImage(){
			document.getElementById('upload_file_back'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photobackChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].back=[{"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'back'}]
			}else{
				alert('上传了非图片');
			}
		},
		/*  卫生许可证 */
		choosehygieneImage(){
			document.getElementById('upload_file_hygiene'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photohygieneChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].hygiene=[{"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'hygiene'}]
			}else{
				alert('上传了非图片');
			}
		},
		/*   医疗许可证 */
		choosemedicalImage(){
			document.getElementById('upload_file_medical'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photomedicalChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].medical=[{"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'medical'}]
			}else{
				alert('上传了非图片');
			}
		},
		/* 尽职调查报告 */
		choosediligenceImage(){
			document.getElementById('upload_file_diligence'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photodiligenceChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].diligence.push({"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'diligence'})
			}else{
				alert('上传了非图片');
			}
		},
		/* 商户现场照片 */
		choosemerchantImage(){
			document.getElementById('upload_file_merchant'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photomerchantChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].merchant.push({"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'merchant'})
			}else{
				alert('上传了非图片');
			}
		},
		/* 其他补充资料 */
		chooseotherImage(){
			document.getElementById('upload_file_other'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photootherChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].other.push({"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'other'})
			}else{
				alert('上传了非图片');
			}
		},
		/* 资方合同 */
		choosemanagementImage(){
			document.getElementById('upload_file_management'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photomanagementChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].management.push({"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'management'})
			}else{
				alert('上传了非图片');
			}
		},
		/*  时尖合同 */
		chooseacetechImage(){
			document.getElementById('upload_file_acetech'+this.editableTabsValue).click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photoacetechChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editableTabs[this.editableTabsValue].acetech.push({"imgId":'',"imgUrl":dataURL.split(',')[1],"imgShopType":'acetech'})
			}else{
				alert('上传了非图片');
			}
		},
		toBase64(file){
			return new Promise(function(resolve, reject) { 
				//将图片img转化为base64
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onloadend = function () {
					resolve(reader.result)
				};
			})
		},
		deleteImg(e,index,indexfs){/* 删除数组图片 */
			this.editableTabs[index][e].splice(indexfs,1)
		},
		async saveInfo(){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			var merchant = {"saveShopList":[],"updateShopList":[]}
			this.editableTabs.forEach((item,index) => {
				if(item.isAdd){/* 为新增 */
					merchant["saveShopList"].push(item)
				}else{/* 为修改 */
					merchant["updateShopList"].push(item)
				}
			})
			const {data:res} = await this.$http.post('/shopManage/saveAndUpdate',merchant)
			loading.close();
			if(res.code!==200) {
				return this.$message.error('修改失败')
			}
			this.$message.success('修改成功')
			this.$router.push({path:"/addMerchant"})
		},
		back(){
			this.$router.push({path:"/addMerchant"})
		},
		async seachEquery(id,num,isadd){
			if(num == 1){
				this.disabledType = true
			}else{
				this.disabledType = false
			}
			if(isadd == 'isadd'){
				this.editinfoList={
					"itemId":"",
					"sort":"",
					"itemName":"",
					"priceDiscount":"",
					"priceNormal":"",
					"startTime":"",
					"endTime":"",
					"counts":0,
					"content":[{"title":"","details":"","counts":""}],
					"sellRemark":[{"title":"","content":""}],
					"remark":[{"content":""}],
					"reserveCounts":0,
					"itemType":"common",
					"onOffStatus":1,
					"tagVoList":[{"tagId":"","code":"","value":""}]
				}
				this.isAddInfo = true
			}else{
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/itemManage/queryItemsById',{id:id})
				loading.close();
				this.editinfoList = res.data
				if(this.editinfoList.tagVoList.length == 0 ){
					this.editinfoList.tagVoList=[{"tagId":"","code":"","value":""}]
				}
				this.editinfoList.content = JSON.parse(this.editinfoList.content)
				this.editinfoList.remark = JSON.parse(this.editinfoList.remark)
				this.editinfoList.sellRemark = JSON.parse(this.editinfoList.sellRemark)
				this.isAddInfo = false
			}
			this.editDialogVisible = true;
		},
		addContent(index){/* 添加商品介绍 */
			var that = this
			var content = []
			this.editinfoList.content.forEach((item,indexvv) => {
				content.push(item)
				if(index == indexvv){
					content.push(that.content)
				}
			})
			this.editinfoList.content = content
			this.content={"title":"","details":"","counts":""}
		},
		addSellRemark(index){
			var that = this
			var content = []
			this.editinfoList.sellRemark.forEach((item,indexvv) => {
				content.push(item)
				if(index == indexvv){
					content.push(that.sellRemark)
				}
			})
			this.editinfoList.sellRemark = content
			this.sellRemark={"title":"","content":""}
		},
		addRemark(index){
			var that = this
			var content = []
			this.editinfoList.remark.forEach((item,indexvv) => {
				content.push(item)
				if(index == indexvv){
					content.push(that.remark)
				}
			})
			this.editinfoList.remark = content
			this.remark={"content":""}
		},
		deleteList(e,index){
			this.editinfoList[e].splice(index,1)
		},
		async editinfoSave(){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			var remark =[];
			this.editinfoList.remark.forEach((item,index)=>{
				remark.push(item.content)
			})
			this.$set(this.editinfoList,'shopId',this.editableTabs[this.editableTabsValue].shopId);
			this.$set(this.editinfoList,'contentList',this.editinfoList.content);
			this.$set(this.editinfoList,'remarkList',remark);
			this.$set(this.editinfoList,'sellRemarkList',this.editinfoList.sellRemark);
			if(this.isAddInfo){
				const {data:res} = await this.$http.post('/itemManage/save',this.editinfoList)
				setTimeout(() => {
				  loading.close();
				}, 500);
				if(res.code!==200) {
					return this.$message.error('添加失败')
				}
				this.editDialogVisible = false;
				this.$message.success('添加成功')
				this.editableTabs[this.editableTabsValue].itemsInfoList.push(this.editinfoList)
			}else{
				const {data:res} = await this.$http.post('/itemManage/update',this.editinfoList)
				setTimeout(() => {
				  loading.close();
				}, 500);
				if(res.code!==200) {
					return this.$message.error('修改失败')
				}
				this.editDialogVisible = false;
				this.$message.success('修改成功')
				this.editableTabs[this.editableTabsValue].itemsInfoList.forEach((item,index) =>{
					if(item.itemId == this.editinfoList.itemId){
						this.editableTabs[this.editableTabsValue].itemsInfoList[index]=this.editinfoList
					}
				})
			}
		},
		// 监听switch状态改变
		async statusChanged(tableList,id){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			const {data:res} = await this.$http.post('/itemManage/updateType',{id:id,type:tableList.onOffStatus})
			loading.close();
			if(res.code!==200) {
				tableList.onOffStatus = !tableList.onOffStatus
				return this.$message.error('修改状态失败')
			}
		  this.$message.success('修改状态成功')
		},
		changeH5(index){
			if(that.editableTabs[index].shopCategory == 0){
				that.editableTabs[index].shopCategory = 1
			}else{
				that.editableTabs[index].shopCategory = 0
			}
		}
	}
  }
</script>

<style lang="less" scoped>
	#mycanvas {
	    border: 1px solid rgb(199, 198, 198);
	}
	.q-wapper{
		text-align: center;
	}
	p{
		color: #1663af;font-weight: 600;
		span{
			color: #4D4D4D;
			margin-left: 10px;
			font-size: 12px;
			a{
				text-decoration: underline;
				color: #409EFF;
			}
		}
	}
	.el-col{
		display: flex;
		align-items: center;
		margin-bottom: 25px;
		span{
			display: inline-block;
			width: 116px;
			text-align: right;
			margin-right: 15px;
		}
		.el-input{
			width: 70%;
		}
		.el-textarea{
			width: 70%;
		}
	}
	.imgList{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 15px;
		.imgItem{
			height: 90px;
			width: 160px;
			margin-right: 15px;
			border: 1px solid #c6c6c6;
			position: relative;
			.imgItem-con{
				height: 100%;
				width: 100%;
				position: absolute;
				z-index: 3;
			}
			.img-wapper-top-clear{
				width: 14px;
				height: 14px;
				position: absolute;
				z-index: 10;
				top: -7px;
				right: -7px;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.el-table{
		margin-bottom: 25px;
	}
	.editIcon{
		width: 80px;
		height: 80px;
	}
	
	.listWapper{
		align-items: flex-start;
		flex-wrap: wrap;
		.listInner-out{
			flex: 1;
			.listInner{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 15px;
				.el-input{
					margin-right: 20px;
					width: 28%;
				}
			}
			.listInner:last-child{
				margin-bottom:0;
			}
		}
	}
	.add{
		color: #007AFF;
		margin-left: 10px;
		cursor: pointer;
		font-size: 14px;
	}
	.del{
		color: #ff3c3f;
		margin-left: 10px;
		cursor: pointer;
		font-size: 14px;
	}
</style>
